<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui"
	xmlns:cc="http://java.sun.com/jsf/composite"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:hmrList="http://java.sun.com/jsf/composite/list"	
	xmlns:hmrDetail="http://java.sun.com/jsf/composite/detail"		>

<cc:interface>
	<cc:attribute name="handler"		type="com.hemerasolutions.v2trainer.component.interfaces.table.EquipmentTableCompInterface" required="true"/>
	<cc:attribute name="sideBarDetail"	type="java.lang.Boolean" 	default="false"  required="false"/>
	<cc:attribute name="title"			type="java.lang.String"		default="#{msgs.OwnEquipments}" required ="false" />
	<cc:attribute name="parentTree"		type="java.lang.String"		default="#{cc.parent.clientId}" />	
	<cc:attribute name="editable"		type="java.lang.Boolean"	default="false"	 required="false"/>	
</cc:interface>

<cc:implementation>
	<span id="#{cc.clientId}" >
		<p:outputPanel id="equipmentPanel" layout="block" >
			<h:panelGrid  columns="2" style="height:90%;width:100%" columnClasses="top-align,top-align" >
				<h:column>
					<h:form id="equipmentTableForm" prependId="false">	
						<p:dataTable id="equipmentsTable" value="#{cc.attrs.handler.filteredEquipments}" var="equipment" paginator="true"  
							paginatorAlwaysVisible="false"  paginatorPosition="bottom" rows="8" emptyMessage="#{msgs.NoResults}" >
							<p:columnGroup type="header" >  
								<p:row>
									<p:column colspan="7" style="text-align:center;min-width:400px;max-width:500px">
										<f:facet name="header">
											<h:outputText value="#{cc.attrs.title}" />
										</f:facet>
									</p:column>
									<p:column colspan="1"  styleClass="ui-table-button-row">
										<f:facet name="header">
											<p:commandButton  oncomplete="wfilterEquipmentDialog_#{cc.id}.show();"  update=":#{cc.clientId}:filterEquipmentDialog"
												title="#{msgs.Filter}" 	icon="ui-icon-search"  styleClass="ui-table-button"/>
										</f:facet>
									</p:column>
								</p:row>
								<p:row>
									<p:column colspan="1"  styleClass="ui-table-button-row"  style="text-align:center">
										<f:facet name="header">
											<p:commandButton oncomplete="waddEquipmentDialog_#{cc.id}.show();" 		update=":#{cc.clientId}:addEquipmentDialog"
												title="#{msgs.Add}" icon="ui-icon-plus" styleClass="ui-table-button" disabled="#{!cc.attrs.editable}"/>
										</f:facet>
									</p:column>		
									<p:column	colspan="3" >
										<f:facet name="header">
											<h:outputText value="#{msgs.Name}"/>
										</f:facet>
									</p:column>
									<p:column	colspan="1" >
										<f:facet name="header">
											<h:outputText value="#{msgs.Description}"/>
										</f:facet>
									</p:column>
									<p:column	colspan="1" >
										<f:facet name="header">
											<h:outputText value="#{msgs.InsertedAt}"/>
										</f:facet>
									</p:column>
									<p:column	colspan="2">
									</p:column>
								</p:row>	
							</p:columnGroup>
							<p:column colspan="2" headerText="#{msgs.Name}" >
								<h:outputText value="#{equipment.name}" />
							</p:column>
							<p:column colspan="1" styleClass="ui-table-button-row" >
								<p:commandButton title="#{msgs.View}" action="#{cc.attrs.handler.toViewEquipment}" icon="ui-icon-search" oncomplete="wequipmentDetailsDialog_#{cc.id}.show();"
									update=":#{cc.clientId}:photosMultimedia"  styleClass="ui-table-button" rendered="#{!cc.attrs.sideBarDetail}">
									<f:setPropertyActionListener target="#{cc.attrs.handler.equipment}" value="#{equipment}"/> 
								</p:commandButton>
								<p:commandButton title="#{msgs.View}" action="#{cc.attrs.handler.toViewEquipment}" icon="ui-icon-search" rendered="#{cc.attrs.sideBarDetail}"
									update=":#{cc.clientId}:equipmentDetailsDialog, :#{cc.clientId}:photosMultimedia"  styleClass="ui-table-button">
									<f:setPropertyActionListener target="#{cc.attrs.handler.equipment}" value="#{equipment}"/> 
								</p:commandButton>
							</p:column>
							<p:column colspan="1" styleClass="ui-table-button-row" >
								<p:commandButton title="#{msgs.Delete}"	actionListener="#{cc.attrs.handler.deleteEquipment}" disabled="#{!cc.attrs.editable}"	update="equipmentsTable,:#{cc.clientId}:photosMultimedia" icon="ui-icon-trash" styleClass="ui-table-button"> 
									<f:attribute name="equipment" value="#{equipment}" />
								</p:commandButton>
							</p:column>		
							<p:column headerText="#{msgs.Description}" style="max-width:250px"  >
								<h:outputText value="#{equipment.description}"  style="white-space: normal;"/>
							</p:column>		
							<p:column colspan="1" headerText="#{msgs.CreatedAt}">
								<h:outputText value="#{equipment.createdAt}">
									<f:convertDateTime locale="pt" dateStyle="long" pattern="dd/MM/yyyy HH:mm" />
								</h:outputText>
							</p:column>		
							<p:column colspan="2" style="white-space: nowrap;">
								<p:graphicImage style="display:block"  cache="false" url="#{equipment.principalPhoto.folder}#{equipment.principalPhoto.location}" height="48" width="64" />
							</p:column>
						</p:dataTable>	
					</h:form>		
				</h:column>
				<h:column>
					<p:outputPanel id="photosMultimedia" layout="block" >
						<p:accordionPanel  style="margin-left:20px;min-width:600px;max-width:650px" rendered="#{cc.attrs.sideBarDetail and cc.attrs.handler.equipment != null}" >
							<p:tab title="#{msgs.EquipmentPhotos}"  >
								<hmrList:photosList  	photosHandler="#{cc.attrs.handler.photosListHandler}" editable="false" />
							</p:tab>
							<p:tab title="#{msgs.EquipmentVideos}" >
								<hmrList:videosList 	videosHandler="#{cc.attrs.handler.videosListHandler}" editable="false" />
							</p:tab>
						</p:accordionPanel>  						
					
					</p:outputPanel>
				</h:column>

			</h:panelGrid>

		</p:outputPanel>

		<p:dialog id="addEquipmentDialog" 	 header="#{msgs.Add}"	widgetVar="waddEquipmentDialog_#{cc.id}"  		appendTo="@(body)" dynamic="true"  modal="true">
			<h:form id="addEquipmentForm" prependId="false"  >
				<h:panelGrid columns="2" cellpadding="2">
					<h:outputLabel 	value="#{msgs.EquipmentName} :"  />
					<p:inputText	value="#{ cc.attrs.handler.findByEquipmentName}" 	maxlength="20" 	size="20"/>
	
					<h:outputLabel 	value="#{msgs.EquipmentDescription} :" 	/>
					<p:inputText	value="#{ cc.attrs.handler.findByEquipmentDescription}" 	maxlength="52" 	size="52" />
	
					<h:outputLabel	value="#{ msgs.CreatedAt} :" />
					<h:column>
						<p:calendar	value="#{cc.attrs.handler.findByBegCreatedAt}"		locale="pt"		timeZone="Brazil/East" selectOtherMonths="true" readOnlyInputText="true"  />
	                      #{ msgs.To}
	                      <p:calendar	value="#{cc.attrs.handler.findByEndCreatedAt}"		locale="pt"		timeZone="Brazil/East" selectOtherMonths="true"	readOnlyInputText="true" />
					</h:column>
	
					<h:outputLabel	value="#{ msgs.ChangedAt} :" />
					<h:column>
						<p:calendar	value="#{cc.attrs.handler.findByBegChangedAt}"		locale="pt"		timeZone="Brazil/East" selectOtherMonths="true" readOnlyInputText="true"  />
	                      #{ msgs.To}
	                   	<p:calendar	value="#{cc.attrs.handler.findByEndChangedAt}"		locale="pt"		timeZone="Brazil/East" selectOtherMonths="true"	readOnlyInputText="true" />
					</h:column>
	
		            <h:outputText value="#{msgs.Status} :" />
		            <p:selectOneRadio value="#{cc.attrs.handler.findByEquipmentStatus}" >
		                <f:selectItem itemLabel="#{msgs.Active}"  	itemValue="true"   />
		                <f:selectItem itemLabel="#{msgs.Inactive}"	itemValue="false" />
		            </p:selectOneRadio>
	
	
				</h:panelGrid>
				<p:commandButton value="#{ msgs.Search}" 	actionListener="#{cc.attrs.handler.searchEquipmentsInLibrarys}"	icon=" ui-icon-search" 
				 		update=":growl, foundEquipmentTable" process="addEquipmentForm"  />
				<p:commandButton value="#{ msgs.Clear}"		type="button"	icon="ui-icon-clean">
					 <p:ajax update="addEquipmentForm" resetValues="true" />  	
				</p:commandButton>
					
				<p:spacer height="15" />
				<p:dataTable id="foundEquipmentTable" value="#{cc.attrs.handler.foundEquipments}" var="equipment" paginator="true"  style="width:500px" paginatorAlwaysVisible="false"  
					paginatorPosition="bottom" rows="3" emptyMessage="#{msgs.NoResults}">
					<p:column  styleClass="ui-table-button-row">
						<p:commandButton title="#{msgs.Add}" icon="ui-icon-plus" styleClass="ui-table-button" actionListener="#{cc.attrs.handler.addEquipment}"
							update="foundEquipmentTable, :#{cc.clientId}:equipmentPanel" process="@this"   >
							<f:attribute  name="equipment" value="#{equipment}"/>
						</p:commandButton>
					</p:column>
					<p:column headerText="#{msgs.Name}">
						<h:outputText value="#{equipment.name}"/>
					</p:column>
					<p:column headerText="#{msgs.Description}" style="max-width:250px"  >
						<h:outputText value="#{equipment.description}"  style="white-space: normal;"/>
					</p:column>		
					<p:column headerText="#{msgs.InsertedAt}" style="white-space: nowrap;">
						<h:outputText value="#{equipment.createdAt}">
							<f:convertDateTime locale="pt" dateStyle="long" pattern="dd/MM/yyyy HH:mm" />
						</h:outputText>
					</p:column>
					<p:column style="white-space: nowrap;">
						<p:graphicImage style="display:block"  cache="false" url="#{equipment.principalPhoto.folder}#{equipment.principalPhoto.location}" height="48" width="64" />
					</p:column>
				</p:dataTable>
			</h:form>
		</p:dialog>
	

		<p:dialog id="filterEquipmentDialog" header="#{msgs.Filter}" 	widgetVar="wfilterEquipmentDialog_#{cc.id}"  	appendTo="@(body)" dynamic="true"  modal="true">
			<h:form id="filterEquipmentForm" prependId="false">
				<h:panelGrid columns="2" cellpadding="2">
	
					<h:outputLabel 	value="#{msgs.EquipmentName} :" 	for="filterByEquipmentName" />
					<p:inputText	id="filterByEquipmentName" 		value="#{ cc.attrs.handler.filterByEquipmentName}" 	maxlength="20" 	size="20" />
	
					<h:outputLabel 	value="#{msgs.EquipmentDescription} :" 	for="filterByEquipmentDescription" />
					<p:inputText	id="filterByEquipmentDescription" 		value="#{ cc.attrs.handler.filterByEquipmentDescription}" 	maxlength="52" 	size="52" />
	
					<h:outputLabel 	value="#{msgs.Obs} :" 	for="filterByEquipmentObs" />
					<p:inputText	id="filterByEquipmentObs" 		value="#{ cc.attrs.handler.filterByEquipmentObs}" 	maxlength="52" 	size="52" />
	
					<h:outputText	value="#{ msgs.CreatedAt} :" />
					<h:column>
						<p:calendar	value="#{cc.attrs.handler.filterByBegCreatedAt}"		locale="pt"		timeZone="Brazil/East" selectOtherMonths="true" readOnlyInputText="true"  />
	                      #{ msgs.To}
	                      <p:calendar	value="#{cc.attrs.handler.filterByEndCreatedAt}"		locale="pt"		timeZone="Brazil/East" selectOtherMonths="true"	readOnlyInputText="true" />
					</h:column>
	
					<h:outputText	value="#{ msgs.ChangedAt} :" />
					<h:column>
						<p:calendar	value="#{cc.attrs.handler.filterByBegChangedAt}"		locale="pt"		timeZone="Brazil/East" selectOtherMonths="true" readOnlyInputText="true"  />
	                      #{ msgs.To}
	                   	<p:calendar	value="#{cc.attrs.handler.filterByEndChangedAt}"		locale="pt"		timeZone="Brazil/East" selectOtherMonths="true"	readOnlyInputText="true" />
					</h:column>
	
				</h:panelGrid>
	
				<p:commandButton value="#{ msgs.Filter}"	actionListener="#{cc.attrs.handler.filterEquipments}"	icon=" ui-icon-search"  
					 update=":growl,  :#{cc.clientId}:equipmentPanel" 	process="filterEquipmentForm" />
				<p:commandButton value="#{ msgs.Clear}"		type="button"	icon="ui-icon-clean">
					 <p:ajax update="filterEquipmentForm" resetValues="true" />  	
				</p:commandButton>
	
			</h:form> 
		</p:dialog>
	
		
		
		<p:dialog id="equipmentDetailsDialog" header="#{msgs.EquipmentDetails}"	widgetVar="wequipmentDetailsDialog_#{cc.id}" 	appendTo="@(body)" dynamic="true"  modal="true">
			<hmrDetail:equipmentDetails handler="#{cc.attrs.handler.equipmentDetailsComp}" widgetVar="wequipmentDetailsDialog_#{cc.id}" editable="false"/>
		</p:dialog>	
	</span>
</cc:implementation>


</html>